<!--
 * @Author: MarsLay
 * @Date: 2021-12-23 09:39:56
 * @LastEditTime: 2024-01-08 13:34:12
 * @LastEditors: MarsLay 331412466@qq.com
 * @Description: 输入框组件
 * @FilePath: \basic-module\components\textarea\textarea.vue
-->
<template>
  <view class="textarea">
    <view class="label single-ellipsis">
      <span v-if="requiredColor" :style="{ color: requiredColor }">*</span>
      {{ label }} <slot></slot>
    </view>
    <view class="part">
      <textarea :maxlength="max" :disabled="disabled" :auto-height="autoheight" :placeholder="placeholder"
        :class="{ 'disabled': disabled }" fixed="true" v-model="childVal" placeholder-class="formPlaceholader"></textarea>
    </view>
  </view>
</template>

<script>
export default {
  name: "ltextarea",
  components: {},
  props: {
    label: {
      type: String,
      default: "",
    },
    mark: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    value: {
      type: [String, Number],
      default: "",
    },
    max: {
      type: [String, Number],
      default: 200,
    },
    autoheight: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    requiredColor: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      childVal: this.value,
    };
  },
  computed: {},
  watch: {
    childVal(v) {
      v.length >= this.max &&
        this.$util.tip({ title: `最多输入${this.max}字` });
      this.$emit("update:value", v);
      this.$emit("change", { value: v, key: this.mark });
    },
    deep: true
  },
  onLoad(d) { },
  create() { },
  methods: {},
};
</script>
<style lang='less' scoped>
.textarea {
  padding: 30upx 40upx;
  background: #ffffff;
}

.label {
  .flex(row, flex-start);
  margin-bottom: 20upx;
  color: #888990;
}

.part {
  .flex();
  padding: 25upx 35upx;
  color: #1d256e;
  border-radius: 14upx;
  background-color: #f6f7f9;
}

uni-textarea {
  width: 100%;
  height: 44upx;
}

/deep/ textarea {
  min-height: 44upx !important;
}

/deep/ .formPlaceholader,
.disabled {
  color: #c7c7c8 !important;
}
</style>